<template>
  <div class="category">
    <div class="cate">
      <!-- 左侧导航 -->
      <div class="nev">
        <div class="title" @click="allbooks()">
          <i class="el-icon-s-grid"></i>
          全部分类
        </div>
        <ul>
          <li
            :class="active == index ? 'active' : ''"
            v-for="(item, index) in navdata"
            v-show="index < num"
            :key="item.index"
            @click="showothercategorybooks(item.id, index)"
          >
            {{ item.name }}
          </li>
        </ul>
        <div class="title" @click="showMore">
          {{ txt }}
        </div>
      </div>
      <!-- 右侧内容 -->
      <div class="conten">
        <div class="search">
          <el-row :gutter="20">
            <el-col :span="8">
              <p>筛选：</p>
              <el-select
                v-model="value"
                value-key="value"
                clearable
                placeholder="请选择筛选类型..."
                @clear="clearsearch()"
                @change="selectprice(value)"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-input
                placeholder="请输入作者或者出版社查询..."
                v-model="searchbookpressauthor"
                clearable
                @clear="clearsearch()"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="bookpressauthor()"
                ></el-button>
              </el-input>
            </el-col>
            <el-col :span="8">
              <el-input
                placeholder="请输入书名查询..."
                v-model="searchbookname"
                clearable
                @clear="clearsearch()"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="Searchbookname()"
                ></el-button>
              </el-input>
            </el-col>
          </el-row>
        </div>
        <div class="body" v-if="booksdata1.length">
          <div class="item" v-for="item in booksdata1" :key="item.id">
            <router-link :to="'/details/' + item.id">
              <div class="item0">
                <div class="image">
                  <img :src="api + item.image" alt="" />
                </div>
                <div class="name">
                  <span>{{ item.bookname }}</span>
                </div>
               <div class="price">
                <p>￥{{ item.vipprice }}</p>
                <p>￥{{ item.price }}</p>
              </div>
              </div>
            </router-link>
          </div>
        </div>
        <div class="isbody" v-else>
          <span>暂无商品......</span>
        </div>
        <!-- 分页 -->
        <el-pagination
          @next-click="handleNextClick"
          @prev-click="handlePrevClick"
          @current-change="handleCurrentChange"
          :current-page="currentpage"
          background
          layout="total, prev, pager, next, jumper"
          :total="tableData_length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchbookpressauthor: "",
      searchbookname: "",
      active: -1,
      navdata: [],
      booksdata: [],
      booksdata1: [], //每页显示条目
      api: this.imageapi,
      isShow: true,
      num: 5,
      txt: "展开分类﹀",
      currentpage: 1, //当前页面
      tableData_length: 0, //总条目数
      pageSize: 10, //默认每页显示10条
      options: [
        {
          id: "1",
          label: "价格降序"
        },
        {
          id: "2",
          label: "价格升序"
        },
      ],
      value: ""
    };
  },
  mounted() {
    this.init();
    this.categoryinit();
  },
  methods: {
    // 展开和收起分类
    showMore() {
      this.isShow = !this.isShow;
      this.num = this.isShow ? 5 : this.navdata.length;
      this.txt = this.isShow ? "展开分类﹀" : "收起分类︿";
    },
    // 分类展示图书
    init() {
      const that = this;
      that.$http
        .get("/showallbooks")
        .then(res => {
          // console.log(res);
          that.booksdata = res.data;
          that.tableData_length = res.data.length;
          this.handleCurrentChange(1);
        })
        .catch(function() {});
    },
    // 展示分类
    categoryinit() {
      const that = this;
      that.$http
        .get("/showbookscategory")
        .then(res => {
          // console.log(res);
          that.navdata = res.data;
        })
        .catch(function() {});
    },
    //通过id查找对应的分类
    showothercategorybooks(id, index) {
      this.active = index;
      this.$http.post("/showothercategorybooks", { id }).then(res => {
        this.booksdata = res.data;
        this.tableData_length = res.data.length;
        this.handleCurrentChange(1);
      });
    },
    //点击左侧导航的全部 加载全部
    allbooks() {
      this.init();
      this.active = -1;
    },
    //清除搜索框
    clearsearch() {
      this.init();
      this.active = -1;
    },
    //按照书名查询
    Searchbookname() {
      if (this.searchbookname == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      } else {
        let search = this.searchbookname;
        this.booksdata = this.booksdata.filter(item => {
          let searchField = { bookname: item.bookname };
          return Object.keys(searchField).some(key => {
            return (
              String(item[key])
                .toLowerCase()
                .indexOf(search) > -1
            );
          });
        });
      }
      this.tableData_length = this.booksdata.length;
      this.handleCurrentChange(1);
    },
    //按照作者或者出版社查询
    bookpressauthor() {
      if (this.searchbookpressauthor == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      } else {
        let search = this.searchbookpressauthor;
        this.booksdata = this.booksdata.filter(item => {
          let searchField = { press: item.press, author: item.author };
          return Object.keys(searchField).some(key => {
            return (
              String(item[key])
                .toLowerCase()
                .indexOf(search) > -1
            );
          });
        });
      }
      this.tableData_length = this.booksdata.length;
      this.handleCurrentChange(1);
    },
    //处理数据,分页
    handleTableData() {
      this.booksdata1 = this.booksdata.slice(
        (this.currentpage - 1) * this.pageSize,
        this.currentpage * this.pageSize
      );
    },
    //点击中间页的按钮 执行的方法
    handleCurrentChange(val) {
      this.currentpage = val;
      this.handleTableData();
    },
    //点击向前的按钮 执行的方法
    handlePrevClick(val) {
      this.currentpage = val;
      this.handleTableData();
    },
    //点击向后的按钮 执行的方法
    handleNextClick(val) {
      this.currentpage = val;
      this.handleTableData();
    },
    //筛选查询
    selectprice(id) {
      if (id == 1) {
        console.log(id)
        this.$http.get("/selectpricedescbooks").then(res => {
          // console.log(res);
          this.booksdata = res.data;
          this.tableData_length = res.data.length;
          this.handleCurrentChange(1);
        });
      } else if (id == 2) {
        // console.log(id)
        this.$http.get("/selectpriceascbooks").then(res => {
          console.log(res);
          this.booksdata = res.data;
          this.tableData_length = res.data.length;
          this.handleCurrentChange(1);
        });
      }
    }
  }
};
</script>

<style scoped>
.category {
  width: 100%;
}
.cate {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 1200px;
  margin: 10px auto;
}
.category .nev {
  width: 200px;
}
.nev .title {
  width: 200px;
  height: 40px;
  font-size: 18px;
  color: #fff;
  background: #6ca0fa;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}
.el-icon-s-grid {
  margin-right: 2px;
}
ul {
  padding: 0;
  text-align: center;
  margin: 0 auto;
  background: #eee;
}
ul li {
  list-style: none;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
}
ul li:hover {
  color: #fff;
  background: #a7c4f7;
}
/* 绑定点击li样式 */
.active {
  color: #fff;
  background: #a7c4f7;
}
.category .conten {
  width: 950px;
  padding-left: 50px;
}
.search {
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.search p {
  display: inline;
  font-size: 18px;
  font-weight: bold;
  color: #6ca0fa;
}
.conten .body {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  width: 100%;
  margin-top: 20px;
}
.item {
  width: 19%;
  height: 300px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 0.5%;
}
.item0 {
  width: 96%;
  margin: 4%;
}
.item0 .image {
  width: 100%;
  height: 200px;
}
.item0 .image img {
  width: 90%;
  height: 90%;
  margin: 5%;
  cursor: pointer;
  transition: all 0.6s;
}
.item0 .image img:hover {
  transform: scale(1.06);
}
.item0 .name {
  height: 40px;
  font-size: 15px;
  line-height: 1.5;
  color: #303133;
  text-align: left;
  padding: 5px 10px;
  overflow: hidden; /*超出隐藏*/
}
.item0 .name:hover {
  color: #2db8eb;
}
.el-pagination {
  margin: 20px;
  text-align: center;
}
.isbody {
  text-align: center;
  margin: 60px;
}
.isbody span {
  font-size: 20px;
  color: rgb(90, 111, 250);
}
.price {
  height: 40px;
  text-align: left;
}
.price p {
  display: inline;
}
.price p:nth-child(1) {
  font-size: 20px;
  color: #f40;
}
.price p:nth-child(2) {
  font-size: 17px;
  color: #606266;
  text-decoration: line-through;
  margin-left: 5px;
}
</style>